<template>
	<view class="container">
		<view class="staff-wrapper">
			<view 
				class="staff-item"
				v-for="(item,index) in activeArgs"
				:key="item.id"
			>
				<view class="staff-item-title">
					<text class="title-text ">
						{{item.val}}
					</text>
				</view>
				<view class="staff-inp upload-bg" @click="handleChooseFile(item.title)">
					请上传小于30MB的文件
				</view>
				<view class="annex-box" v-if="item.url">
					<uni-icons class="annex-icon" color="#2D83FE" type="paperclip" size="20"></uni-icons>
					<view class="annex-text">{{item.url}}</view>
				</view>
			</view>
		</view>
		<view class="foot-wrapper">
			<view 
				class="foot-btn" 
				hover-class="click-btn"
				@click="handleToPage"
			>
				完成
			</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import config from '@/common/config.js'
	export default {
		data() {
			return {
				
			}
		},
		computed: {
			...mapGetters(
				[
				 "activeArgs"
				]
			)
		},
		methods: {
			...mapActions('certificate',['setActiveArgs']),
			async handleChooseFile (name) {
				
				try {
					const data = await this.handleLoadingFile()
					let fileUrl = ''
					for (const file of data) {
						const response = await this.handleUploadFile(file)
						const d = JSON.parse(response.data)
						fileUrl = d.data
					}
					this.hanleUploadSetVal(fileUrl,name)
				} catch (e) {
					this.$utils.showToast(e)
				}	
			},
			hanleUploadSetVal (url,name) {
				let a = JSON.parse(JSON.stringify(this.activeArgs))
				for (let obj of a) {
					if (obj.title === name) {
						obj.url = url
					}
				}
				console.log(a)
				this.setActiveArgs(a)
			},
			handleLoadingFile () {
				return new Promise((resolve,reject) => {
					uni.chooseFile({
					  count: 1,
					  extension:['.jpg','.png'],
					  success: (res) => {
						let { tempFilePaths, tempFiles } = res
						for (let { size } of tempFiles) {
							if (size > 31457280) {
								reject('请上传小于30M的文件')
								break
							}
						}
						resolve(tempFilePaths)
					  }
					})
				})
			},
			async handleUploadFile (file) {
				return new Promise((resolve,reject) => {
					uni.uploadFile({
						url: config.baseUrl + '/api/xilujob.staffs_info/upload',
						filePath: file,
						header: {
							//token: this.userInfo.token 
						},
						name: 'image',
						success: (uploadFileRes) => {
							resolve(uploadFileRes)
						},
						fail: (e) => {
							this.$utils.showToast('上传文件失败')
							reject(e)	
						}
					});
				})
			},
			handleToPage () {
				uni.navigateTo({
					url: "/pages/index/index"
				})
			}
		}
	}
</script>

<style lang="scss">
.foot-wrapper {
	padding: 30rpx 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	position: fixed;
	width: 100%;
	left: 0;
	bottom: 200rpx;
	.foot-btn {
		line-height: 70rpx;
		width: 450rpx;
		background: #005AFF;
		border-radius: 5rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		text-align: center;
	}
	.click-btn {
		background: #4481f1;
	}
}
.staff-wrapper {
	padding: 20rpx 50rpx 0 50rpx;
	.staff-item {
		.staff-item-title{
			font-size: 30rpx;
			padding: 26rpx 0;
			.dot {
				color:#FF0000
			}
			.title-text {
				color: #676767;
			}
		}
		.upload-bg {
			background: #ECECEC;
			border: none !important;
			font-size: 14rpx;
			color: #646464 !important;
			justify-content: center;
			
		}
		.annex-box {
			padding: 2rpx 0;
			display: flex;
			align-items: center;
			.annex-icon {
				margin-right: 5rpx;
			}
			.annex-text {
				font-size: 24rpx;
				color: #005AFF;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				width: 580rpx;
			}
		}
		.staff-inp {
			width: 100%;
			height: 70rpx;
			border-radius: 3rpx;
			border: 1rpx solid #D3D3D3;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			.company-icons {
				margin: 0 20rpx;
			}
			.company-wrapper {
				width: 100%;
				.company-name {
					width: 100%;
					height: 50rpx;
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #676767;
				}
				.company-name-tip {
					@extend .company-name;
					color: #979797;
					
				}
			}
			.inp-box {
				width: 100%;
				height: 70rpx;
				font-size: 24rpx;
				color: #676767;
				padding: 0 20rpx;
				box-sizing: border-box;
			}
			.place-holder-s {
				line-height: 70rpx;
				color: #979797;	
			}
			.disabled {
				background: #ECECEC;
			}
			.card-btn {
				width: 250rpx;
				line-height: 70rpx;
				background: #2D83FE;
				font-size: 16rpx;
				color: #FFFFFF;
				text-align: center;
			}
			.btn-click {
				background: #739cd7;
			}
			
		}
	}
}
</style>
